<template>
  <div class="audio">
    <div class="record-box" :style="boxStyle">
      <img class="record" :class="{animateRotate:isPasued}" src="/static/record.png" alt="">
      <div class="text" v-if="isPasued">
        <div class="inner-text">
          正在播放
        </div>
        <div class="dot dot-1">.</div>
        <div class="dot dot-2">.</div>
        <div class="dot dot-3">.</div>
      </div>
      <div v-else class="text">播放结束</div>
      <div v-if="!isPasued" class="mask"></div>
      <img v-if="!isPasued" class="play-btn" src="/static/play.png" @click="rePlay">
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["audioSrc", "isStop"],
  data() {
    return {
      localPath: "",
      timer: null,
      isPasued: true,
      degree: 0,
      boxStyle: "transform:rotate(0deg)",
      innerAudioContext: null
    };
  },

  computed: {
    ...mapState(["AUDIOHEAD", "globalAudioContext"])
  },

  watch: {
    isStop() {
      if (this.innerAudioContext) {
        this.innerAudioContext.stop();
      }
    },
    isPasued(val) {
      if (!val) {
        this.stopTime();
        console.log(this.degree);
        this.boxStyle = `transform:rotate(${this.degree}deg) translateZ(-1);`;
      } else {
        this.startTime();
      }
    }
  },

  methods: {
    startTime() {
      this.timer = setInterval(() => {
        this.degree += 36;
      }, 1200);
    },
    stopTime() {
      clearInterval(this.timer);
    },
    async getAudioFile() {
      wx.downloadFile({
        url: this.AUDIOHEAD + this.audioSrc, //仅为示例，并非真实的资源
        success: res => {
          // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
          this.localPath = res.tempFilePath;
          this.initPlayer();
        }
      });
    },
    initPlayer() {
      this.innerAudioContext = wx.createInnerAudioContext();
      this.innerAudioContext.src = this.localPath;
      this.innerAudioContext.play();
      this.innerAudioContext.onPlay(() => {
        this.isPasued = true;
      });
      this.innerAudioContext.onEnded(() => {
        this.isPasued = false;
      });
    },
    rePlay() {
      console.log("dianji");
      this.innerAudioContext.play();
    }
  },
  mounted() {
    this.getAudioFile();
    this.startTime();
  },
  onHide() {
    if (this.innerAudioContext) {
      this.innerAudioContext.stop();
    }
  },
  onUnload() {
    if (this.innerAudioContext) {
      this.innerAudioContext.stop();
      this.globalAudioContext.play();
    }
  }
};
</script>

<style lang="scss" scoped>
// 音频提示
.audio {
  transform-style: preserve-3d;
}
audio,
.record-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 14rpx;
}
.record-box {
  transform: rotate(0deg);
}
.record {
  width: 380rpx;
  height: 380rpx;
}
.animateRotate {
  animation: rotate 100s ease infinite;
}
.mask {
  width: 154rpx;
  height: 154rpx;
  border-radius: 50%;
  background: #000;
  opacity: 0.3;
  z-index: 1;
}
.play-btn {
  width: 100rpx;
  height: 100rpx;
  z-index: 2;
}
.mask,
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.text {
  width: 186rpx;
  height: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1000rpx;
  background: #fff;
  color: #f46685;
  font-size: 24rpx;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 22rpx;
  .dot {
    opacity: 0;
    animation: shine 1.5s ease infinite;
  }
  .dot-2 {
    animation-delay: 0.2s;
  }
  .dot-3 {
    animation-delay: 0.4s;
  }
}
@keyframes shine {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(3600deg);
  }
}
</style>
